<template>
  <div class='detail-body' ref="print_order">
    <p class="title">订单信息</p>
    <div class="info">
      <p v-for="(item, index) in modelData0" :key="index" :class="item.class + ' mb10'">
        <span>{{item.label}}：</span>
        <span :class="item.class1||'color-999'">测试</span>
        <span class="ml10 color-999">{{item.unit}}</span>
      </p>
    </div>

    <p class="title">{{getTitle}}</p>
    <div class="shop-info">
      <div class="logo">{{getTitle}}：<img :src="imgs.c_logo" alt=""><span>商铺名称或者用户昵称</span> <el-button type="success" class="ml20 quick-video no-print" v-if="path!='/center/seller/myorder/orderManage/detail'">查看实时监控</el-button></div>

      <div class="shop-goods">
        <span>订单内容：</span>
        <div class="table-box">

          <!-- 使用ele的表格打印有点问题 -->
          <table>
            <tr>
              <th>品名</th>
              <th>商品名称</th>
              <th>材质</th>
              <th>特性</th>
              <th>数量/单位</th>
              <th>地区</th>
            </tr>
            <tr>
              <td>01</td>
              <td>02</td>
              <td>03</td>
              <td>04</td>
              <td>05</td>
              <td>06</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="remark mb10">
        <span>备注：</span>
        <p>
          党和国家机关通用公文的种类国务院办公厅曾发布的《国家行政机关公文处理办法》，经过多年的实践，修订后的《办法》从1994年1月1日起施行。把公文种类调整为十二类十三种，删去“指令”、“决议”、“布告”三个文种，将“议案”作为一个新文种列入主要公文种类。即：命令（令），议案，决定，指示，公告，通告，通知，通报，报告，请示，批复，函，会议纪要。此外，中共中央办公厅于1989年4月25日发布的《中国共产党各级领导机关文件处理条例（试行）》中，正式文件的种类里还列有公报、条例、规定三个文种。这样，现在常用的公文种类总共有十六种。
        </p>
      </div>
    </div>

    <p class="title">物流信息</p>
    <div class="logistics-info">
      <Logistics />
    </div>

  </div>
</template>
<script>
import Logistics from './logistics.vue'
import Mixins from '@/mix/mix.js'
export default {
  props:['printStart'],
  components: {Logistics},
  name: "",
  data() {
    return {
      imgs:{
        c_logo:require('@/assets/imgs/center/c_logo.png'),
      },

      modelData0:[
        {prop:"",label:"订单编号"},
        {prop:"",label:"订单状态"},
        {prop:"",label:"付款时间"},
        {prop:"",label:"发货时间"},
        {prop:"",label:"发票"},
        {prop:"",label:"商品报价"},
        {prop:"",label:"运费"},
        {prop:"",label:"税点"},
        {prop:"",label:"税费"},
        {prop:"",label:"总价",class:"money-count",class1:"color-red",unit:"元"},
      ],
    };
  },
  computed:{
    getTitle(){
      let title = this.path =="/center/seller/myorder/orderManage/detail"?"买家信息":"商品信息"
      return title
    }
  },
  watch:{
    printStart(){
      if(this.printStart)this.doPrint()
    }
  },
  methods: {
    doPrint(){
      this.$print(this.$refs.print_order)
    },
  },
  mixins:[Mixins]
};
</script>
<style lang="scss" scoped>
.detail-body {
  padding: 15px;

  .title{
    border-left: 2px solid $blue;
    text-indent: 10px;
    line-height: 35px;
    margin-bottom: 5px;
  }
  .info{
    padding-left: 12px;
    font-size: 14px;
    p{
      line-height: 35px;

      span:nth-child(1){
        display: inline-block;
        min-width: 70px;
        text-align: right;
      }
    }
    .money-count{
      font-size: 20px;
      margin: 20px 0;
    }
  }
  .shop-info{
    padding-left: 12px;
    font-size: 14px;

    .logo{
      line-height: 36px;
      margin-bottom: 10px;
      img{
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      span{
        color: $blue;
        line-height: 36px;
        font-size: 18px;
      }
      .quick-video{
        margin-left: 20px;
        padding: 0 30px;
        border-radius: 30px;
      }
    }
    >div{
      display: flex;

      >p{
        flex: 1;
        overflow-wrap: break-word;
        font-size: 13px;
        color: #666;
      }
    }
    .table-box{
      flex: 1;
      // width: 945px; //有点意思
      margin-bottom: 10px;

      table{
        width: 100%;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ddd;

        tr{
          display: flex;
          th,td{
            width: 0;
            color: #666;
            flex: 1;
            border: 1px solid #ddd;
            border-top: none;
            border-right: none;
            padding: 10px;
            text-align: center;
            font-size: 14px;
          }
        }
      }
    }
    .remark{
      span{
        display: inline-block;
        width: 70px;
      }
    }
  }

  .logistics-info{
    padding-left: 12px;
  }
}
</style>